<template>
    <div>
        <div class="title">{{ cinemaInfo.movieName }}</div>
        <div class="titleInfo">
            <div>{{ cinemaInfo.showTime }}</div>
            <div>{{ cinemaInfo.name }}</div>
        </div>
        <div class="centerInfo">
            <div class="centerInfo2">
                <span>{{ cinemaInfo.seatTypeList[0].name }}</span>
                <img style="width: 20px" :src="cinemaInfo.seatTypeList[0].icon"/>
            </div>
            <div class="centerInfo2">
                <span>{{ cinemaInfo.seatTypeList[1].name }}</span>
                <img style="width: 20px" :src="cinemaInfo.seatTypeList[1].icon"/>
            </div>
            <div class="centerInfo2">
                <span>{{ cinemaInfo.seatTypeList[2].name }}</span>
                <img style="width: 20px" :src="cinemaInfo.seatTypeList[2].icon"/>
            </div>
            <div class="centerInfo2">
                <span>{{ cinemaInfo.seatTypeList[3].name }}</span>
                <img style="width: 20px" :src="cinemaInfo.seatTypeList[3].icon"/>
            </div>
        </div>
        <div class="screen">
            <div class="screen-text">屏幕方向</div>
        </div>
        <div class="box">
            <div
                    v-for="(seatItem, index) in cinemaInfo.seatList"
                    class="seatClass"
                    :key="seatItem.id"
                    @click="clickzuowei(seatItem)"
                    :style="{
                          height: height + 'rem',
                          width: width + 'rem',
                          top: seatItem.gRow * positionDistin + 'rem',
                          left: seatItem.gCol * positionDistin + 'rem',
                        }"
            >
                <img
                        class="seatImgClass"
                        :seatId="seatItem.id"
                        :seatIndex="index"
                        :src="cinemaInfo.seatTypeList[seatItem.type].icon"
                />
            </div>
        </div>
        <div class="btn" @click="ok">确 认 选 座</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                //影院 厅信息
                cinemaInfo: {
                    errorCode: 0,
                    errorMsg: "",
                    name: "4号厅",
                    movieName: "白蛇传之白蛇缘起",
                    showTime: "2019-03-06 周五 16:50",
                    cinema_name: "惊奇队长影院",
                    //座位信息
                    seatList: [
                        {
                            //座位id
                            id: "16879097",
                            //座位X轴实际位置，去掉过道
                            row: "1",
                            //座位Y轴实际位置，去掉过道
                            col: "1",
                            //座位X轴位置
                            gRow: 1,
                            //座位Y轴位置
                            gCol: 4,
                            //类型：区分座位状态，详情看seatTypeList数组，按0,1,2顺序下去代表不同状态，切换图片
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879101",
                            row: "1",
                            col: "4",
                            gRow: 1,
                            gCol: 8,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879104",
                            row: "1",
                            col: "7",
                            gRow: 1,
                            gCol: 11,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879099",
                            row: "1",
                            col: "2",
                            gRow: 1,
                            gCol: 6,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879102",
                            row: "1",
                            col: "5",
                            gRow: 1,
                            gCol: 9,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879105",
                            row: "1",
                            col: "8",
                            gRow: 1,
                            gCol: 12,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879100",
                            row: "1",
                            col: "3",
                            gRow: 1,
                            gCol: 7,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879103",
                            row: "1",
                            col: "6",
                            gRow: 1,
                            gCol: 10,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879107",
                            row: "1",
                            col: "9",
                            gRow: 1,
                            gCol: 14,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879113",
                            row: "2",
                            col: "1",
                            gRow: 2,
                            gCol: 3,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879117",
                            row: "2",
                            col: "4",
                            gRow: 2,
                            gCol: 7,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879120",
                            row: "2",
                            col: "7",
                            gRow: 2,
                            gCol: 10,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879124",
                            row: "2",
                            col: "10",
                            gRow: 2,
                            gCol: 14,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879114",
                            row: "2",
                            col: "2",
                            gRow: 2,
                            gCol: 4,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879118",
                            row: "2",
                            col: "5",
                            gRow: 2,
                            gCol: 8,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879121",
                            row: "2",
                            col: "8",
                            gRow: 2,
                            gCol: 11,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879125",
                            row: "2",
                            col: "11",
                            gRow: 2,
                            gCol: 15,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879116",
                            row: "2",
                            col: "3",
                            gRow: 2,
                            gCol: 6,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879119",
                            row: "2",
                            col: "6",
                            gRow: 2,
                            gCol: 9,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879122",
                            row: "2",
                            col: "9",
                            gRow: 2,
                            gCol: 12,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879142",
                            row: "3",
                            col: "13",
                            gRow: 3,
                            gCol: 15,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879129",
                            row: "3",
                            col: "2",
                            gRow: 3,
                            gCol: 2,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879133",
                            row: "3",
                            col: "5",
                            gRow: 3,
                            gCol: 6,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879136",
                            row: "3",
                            col: "8",
                            gRow: 3,
                            gCol: 9,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879139",
                            row: "3",
                            col: "11",
                            gRow: 3,
                            gCol: 12,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879143",
                            row: "3",
                            col: "14",
                            gRow: 3,
                            gCol: 16,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879130",
                            row: "3",
                            col: "3",
                            gRow: 3,
                            gCol: 3,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879134",
                            row: "3",
                            col: "6",
                            gRow: 3,
                            gCol: 7,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879137",
                            row: "3",
                            col: "9",
                            gRow: 3,
                            gCol: 10,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879141",
                            row: "3",
                            col: "12",
                            gRow: 3,
                            gCol: 14,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879144",
                            row: "3",
                            col: "15",
                            gRow: 3,
                            gCol: 17,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879128",
                            row: "3",
                            col: "1",
                            gRow: 3,
                            gCol: 1,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879131",
                            row: "3",
                            col: "4",
                            gRow: 3,
                            gCol: 4,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879135",
                            row: "3",
                            col: "7",
                            gRow: 3,
                            gCol: 8,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879138",
                            row: "3",
                            col: "10",
                            gRow: 3,
                            gCol: 11,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879154",
                            row: "4",
                            col: "9",
                            gRow: 4,
                            gCol: 10,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879145",
                            row: "4",
                            col: "1",
                            gRow: 4,
                            gCol: 1,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879158",
                            row: "4",
                            col: "12",
                            gRow: 4,
                            gCol: 14,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879148",
                            row: "4",
                            col: "4",
                            gRow: 4,
                            gCol: 4,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879161",
                            row: "4",
                            col: "15",
                            gRow: 4,
                            gCol: 17,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879152",
                            row: "4",
                            col: "7",
                            gRow: 4,
                            gCol: 8,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879155",
                            row: "4",
                            col: "10",
                            gRow: 4,
                            gCol: 11,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879146",
                            row: "4",
                            col: "2",
                            gRow: 4,
                            gCol: 2,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879159",
                            row: "4",
                            col: "13",
                            gRow: 4,
                            gCol: 15,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879150",
                            row: "4",
                            col: "5",
                            gRow: 4,
                            gCol: 6,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879153",
                            row: "4",
                            col: "8",
                            gRow: 4,
                            gCol: 9,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879156",
                            row: "4",
                            col: "11",
                            gRow: 4,
                            gCol: 12,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879147",
                            row: "4",
                            col: "3",
                            gRow: 4,
                            gCol: 3,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879160",
                            row: "4",
                            col: "14",
                            gRow: 4,
                            gCol: 16,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879151",
                            row: "4",
                            col: "6",
                            gRow: 4,
                            gCol: 7,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879164",
                            row: "5",
                            col: "3",
                            gRow: 5,
                            gCol: 3,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879168",
                            row: "5",
                            col: "6",
                            gRow: 5,
                            gCol: 7,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879171",
                            row: "5",
                            col: "9",
                            gRow: 5,
                            gCol: 10,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879175",
                            row: "5",
                            col: "12",
                            gRow: 5,
                            gCol: 14,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879178",
                            row: "5",
                            col: "15",
                            gRow: 5,
                            gCol: 17,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879162",
                            row: "5",
                            col: "1",
                            gRow: 5,
                            gCol: 1,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879165",
                            row: "5",
                            col: "4",
                            gRow: 5,
                            gCol: 4,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879169",
                            row: "5",
                            col: "7",
                            gRow: 5,
                            gCol: 8,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879172",
                            row: "5",
                            col: "10",
                            gRow: 5,
                            gCol: 11,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879176",
                            row: "5",
                            col: "13",
                            gRow: 5,
                            gCol: 15,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879163",
                            row: "5",
                            col: "2",
                            gRow: 5,
                            gCol: 2,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879167",
                            row: "5",
                            col: "5",
                            gRow: 5,
                            gCol: 6,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879170",
                            row: "5",
                            col: "8",
                            gRow: 5,
                            gCol: 9,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879173",
                            row: "5",
                            col: "11",
                            gRow: 5,
                            gCol: 12,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879177",
                            row: "5",
                            col: "14",
                            gRow: 5,
                            gCol: 16,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879207",
                            row: "6",
                            col: "11",
                            gRow: 7,
                            gCol: 12,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879211",
                            row: "6",
                            col: "14",
                            gRow: 7,
                            gCol: 16,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879198",
                            row: "6",
                            col: "3",
                            gRow: 7,
                            gCol: 3,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879202",
                            row: "6",
                            col: "6",
                            gRow: 7,
                            gCol: 7,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879205",
                            row: "6",
                            col: "9",
                            gRow: 7,
                            gCol: 10,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879209",
                            row: "6",
                            col: "12",
                            gRow: 7,
                            gCol: 14,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879212",
                            row: "6",
                            col: "15",
                            gRow: 7,
                            gCol: 17,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879196",
                            row: "6",
                            col: "1",
                            gRow: 7,
                            gCol: 1,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879199",
                            row: "6",
                            col: "4",
                            gRow: 7,
                            gCol: 4,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879203",
                            row: "6",
                            col: "7",
                            gRow: 7,
                            gCol: 8,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879206",
                            row: "6",
                            col: "10",
                            gRow: 7,
                            gCol: 11,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879210",
                            row: "6",
                            col: "13",
                            gRow: 7,
                            gCol: 15,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879197",
                            row: "6",
                            col: "2",
                            gRow: 7,
                            gCol: 2,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879201",
                            row: "6",
                            col: "5",
                            gRow: 7,
                            gCol: 6,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879204",
                            row: "6",
                            col: "8",
                            gRow: 7,
                            gCol: 9,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879220",
                            row: "7",
                            col: "7",
                            gRow: 8,
                            gCol: 8,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879223",
                            row: "7",
                            col: "10",
                            gRow: 8,
                            gCol: 11,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879214",
                            row: "7",
                            col: "2",
                            gRow: 8,
                            gCol: 2,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879227",
                            row: "7",
                            col: "13",
                            gRow: 8,
                            gCol: 15,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879218",
                            row: "7",
                            col: "5",
                            gRow: 8,
                            gCol: 6,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879221",
                            row: "7",
                            col: "8",
                            gRow: 8,
                            gCol: 9,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879224",
                            row: "7",
                            col: "11",
                            gRow: 8,
                            gCol: 12,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879215",
                            row: "7",
                            col: "3",
                            gRow: 8,
                            gCol: 3,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879228",
                            row: "7",
                            col: "14",
                            gRow: 8,
                            gCol: 16,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879219",
                            row: "7",
                            col: "6",
                            gRow: 8,
                            gCol: 7,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879222",
                            row: "7",
                            col: "9",
                            gRow: 8,
                            gCol: 10,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879213",
                            row: "7",
                            col: "1",
                            gRow: 8,
                            gCol: 1,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879226",
                            row: "7",
                            col: "12",
                            gRow: 8,
                            gCol: 14,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879216",
                            row: "7",
                            col: "4",
                            gRow: 8,
                            gCol: 4,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879229",
                            row: "7",
                            col: "15",
                            gRow: 8,
                            gCol: 17,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879230",
                            row: "8",
                            col: "1",
                            gRow: 9,
                            gCol: 1,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879233",
                            row: "8",
                            col: "4",
                            gRow: 9,
                            gCol: 4,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879237",
                            row: "8",
                            col: "7",
                            gRow: 9,
                            gCol: 8,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879240",
                            row: "8",
                            col: "10",
                            gRow: 9,
                            gCol: 11,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879244",
                            row: "8",
                            col: "13",
                            gRow: 9,
                            gCol: 15,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879231",
                            row: "8",
                            col: "2",
                            gRow: 9,
                            gCol: 2,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879235",
                            row: "8",
                            col: "5",
                            gRow: 9,
                            gCol: 6,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879238",
                            row: "8",
                            col: "8",
                            gRow: 9,
                            gCol: 9,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879241",
                            row: "8",
                            col: "11",
                            gRow: 9,
                            gCol: 12,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879245",
                            row: "8",
                            col: "14",
                            gRow: 9,
                            gCol: 16,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879232",
                            row: "8",
                            col: "3",
                            gRow: 9,
                            gCol: 3,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879236",
                            row: "8",
                            col: "6",
                            gRow: 9,
                            gCol: 7,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879239",
                            row: "8",
                            col: "9",
                            gRow: 9,
                            gCol: 10,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879243",
                            row: "8",
                            col: "12",
                            gRow: 9,
                            gCol: 14,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879246",
                            row: "8",
                            col: "15",
                            gRow: 9,
                            gCol: 17,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879256",
                            row: "9",
                            col: "9",
                            gRow: 10,
                            gCol: 10,
                            type: "3",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879260",
                            row: "9",
                            col: "12",
                            gRow: 10,
                            gCol: 14,
                            type: "3",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879263",
                            row: "9",
                            col: "15",
                            gRow: 10,
                            gCol: 17,
                            type: "2",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879247",
                            row: "9",
                            col: "1",
                            gRow: 10,
                            gCol: 1,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879250",
                            row: "9",
                            col: "4",
                            gRow: 10,
                            gCol: 4,
                            type: "2",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879254",
                            row: "9",
                            col: "7",
                            gRow: 10,
                            gCol: 8,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879257",
                            row: "9",
                            col: "10",
                            gRow: 10,
                            gCol: 11,
                            type: "2",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879261",
                            row: "9",
                            col: "13",
                            gRow: 10,
                            gCol: 15,
                            type: "2",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879248",
                            row: "9",
                            col: "2",
                            gRow: 10,
                            gCol: 2,
                            type: "2",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879252",
                            row: "9",
                            col: "5",
                            gRow: 10,
                            gCol: 6,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879255",
                            row: "9",
                            col: "8",
                            gRow: 10,
                            gCol: 9,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879258",
                            row: "9",
                            col: "11",
                            gRow: 10,
                            gCol: 12,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879262",
                            row: "9",
                            col: "14",
                            gRow: 10,
                            gCol: 16,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879249",
                            row: "9",
                            col: "3",
                            gRow: 10,
                            gCol: 3,
                            type: "0",
                            flag: "0",
                            price: "69",
                        },
                        {
                            id: "16879253",
                            row: "9",
                            col: "6",
                            gRow: 10,
                            gCol: 7,
                            type: "2",
                            flag: "0",
                            price: "69",
                        },
                    ],
                    seatTypeList: [
                        {
                            name: "可选",
                            type: "0",
                            seats: 1,
                            icon: "https://www.xollipop.top/可选.png",
                            isShow: "1",
                            position: "up",
                        },
                        {
                            name: "已选",
                            type: "0-1",
                            seats: 1,
                            icon: "https://www.xollipop.top/已选.png",
                            isShow: "1",
                            position: "up",
                        },
                        {
                            name: "已售",
                            type: "0-2",
                            seats: 1,
                            icon: "https://www.xollipop.top/已售.png",
                            isShow: "1",
                            position: "up",
                        },
                        {
                            name: "维修",
                            type: "0-3",
                            seats: 1,
                            icon: "https://www.xollipop.top/维修.png",
                            isShow: "1",
                            position: "up",
                        },
                        {
                            name: "情侣首座可选",
                            type: "1",
                            seats: 1,
                            icon: "https://www.xollipop.top/情侣首座可选.png",
                            isShow: "0",
                            position: "up",
                        },
                        {
                            name: "情侣首座已选",
                            type: "1-1",
                            seats: 1,
                            icon: "https://www.xollipop.top/情侣首座已选.png",
                            isShow: "0",
                            position: "up",
                        },
                        {
                            name: "情侣首座已售",
                            type: "1-2",
                            seats: 1,
                            icon: "https://www.xollipop.top/情侣首座已售.png",
                            isShow: "0",
                            position: "up",
                        },
                        {
                            name: "情侣首座维修",
                            type: "1-3",
                            seats: 1,
                            icon: "https://www.xollipop.top/情侣首座维修.png",
                            isShow: "0",
                            position: "up",
                        },
                        {
                            name: "情侣次座可选",
                            type: "2",
                            seats: 1,
                            icon: "https://www.xollipop.top/情侣次座可选.png",
                            isShow: "0",
                            position: "up",
                        },
                        {
                            name: "情侣次座已选",
                            type: "2-1",
                            seats: 1,
                            icon: "https://www.xollipop.top/情侣次座已选.png",
                            isShow: "0",
                            position: "up",
                        },
                        {
                            name: "情侣次座已售",
                            type: "2-2",
                            seats: 1,
                            icon: "https://www.xollipop.top/情侣次座已售.png",
                            isShow: "0",
                            position: "up",
                        },
                        {
                            name: "情侣次座维修",
                            type: "2-3",
                            seats: 1,
                            icon: "https://www.xollipop.top/情侣次座维修.png",
                            isShow: "0",
                            position: "up",
                        },
                        {
                            name: "情侣座",
                            type: "5",
                            seats: 2,
                            icon: "https://www.xollipop.top/情侣座.png",
                            isShow: "1",
                            position: "up",
                        },
                    ],
                },
                width: 1.4, // 每个座位的宽
                height: 1.4, // 每个座位的高
                positionDistin: 1.1, // 每个座位偏移距离
            };
        },
        methods: {
            //点击座位的时候切换图片。
            clickzuowei(val) {
                console.log(val, "座位信息");
                //循环影厅内座位信息
                this.cinemaInfo.seatList.forEach((item) => {
                    //判断：选中座位和数组内的id是否一致
                    if (item.id == val.id) {
                        //一致就判断他的状态是不是0,0代表未选中，如果是未选中，那就改为1,1就是选中状态。
                        if (item.type == 0) {
                            item.type = 1;
                            //如果状态是1，也就是已经选中的状态，点击就会变成未选中
                        } else if (item.type == 1) {
                            item.type = 0;
                            //如果状态2，也就是已经出售的座位，就提示从新选座
                        } else if (item.type == 2) {
                            alert("此座位已出售，请从新选座");
                            //如果状态3，代表座位损坏，也是提示维修中。
                        } else if (item.type == 3) {
                            alert("此座位损坏，正在维修中！");
                        }
                    }
                });
            },
            //确认选座
            ok() {
                //筛选出选择的座位
                let info = this.cinemaInfo.seatList.filter((item) => {
                    return item.type == 1;
                });
                let list = [];
                //筛选出选择的座位排和列
                info.forEach((item) => {
                    list.push(item.row + " 排 " + item.col + " 座 ");
                });
                console.log("选中的座位信息:", info);
                //有选中的时候显示选中信息和确认购买。没有选中的时候提醒先选座
                if (info.length == 0) {
                    alert("请先选择座位，再确认购买！");
                } else {
                    alert("当前选中座位:" + list.toString());
                }
            },
        },
    };
</script>

<style scoepd>
    .seatClass {
        position: absolute;
    }

    .box {
        position: relative;
        margin-top: -40px;
    }

    .seatImgClass {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }

    .title {
        width: 100%;
        height: 35px;
        background-image: linear-gradient(45deg, #9fa5d5, #aebaf8);
        text-align: center;
        line-height: 35px;
        color: #fff;
        letter-spacing: 2px;
    }

    .titleInfo {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #ccc;
        margin-top: 10px;
        padding: 0 10px 0 10px;
    }

    .centerInfo {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 10px;
    }

    .centerInfo2 {
        display: flex;
        align-items: center;
    }

    .screen {
        width: 250px;
        border: 30px solid #ccc;
        border-color: #ccc transparent transparent transparent;
        height: 20px;
        margin: auto;
        margin-top: 10px;
    }

    .screen-text {
        text-align: center;
        white-space: nowrap;
        font-size: 20px;
        font-weight: 600;
        color: #fff;
        margin-top: -30px;
    }

    .btn {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 35px;
        background-image: linear-gradient(45deg, #9fa5d5, #aebaf8);
        text-align: center;
        line-height: 35px;
        color: #fff;
    }
</style>
